<script>
export default {
  name: 'StatusTag',
  props: {
    text: String,
    type: String,
    hit: Boolean,
    disableTransitions: Boolean,
    color: String,
    size: String
  },

  methods: {
  },
  computed: {
    tagSize() {
      return this.size || (this.$ELEMENT || {}).size;
    }
  },
  render(h) {
    const classes = [ 'el-tag', this.type ? `el-tag--${this.type}` : '',
      this.tagSize ? `el-tag--${this.tagSize}` : '',
      {'is-hit': this.hit}
    ];
    const tagEl = (
    <span class={classes} style={{backgroundColor: this.color}}>
      <i class={`circle-${this.type}`}></i>
      { this.$slots.default }
    </span>);
    return this.disableTransitions ? tagEl : <transition name="el-zoom-in-center">{ tagEl }</transition>;
  }
}
</script>
